<template>
	<view style="width: 100%;height: auto;background: white;">
		<!-- 		<view id="home" style="margin-top: 24rpx;margin-left: 30rpx;float: left;margin-bottom: 18rpx;"
			class="home acea-row row-center-wrapper iconfont icon-xiangzuo h5_back" @tap="returns">
		</view> -->
		<view style="width: 100%;height: 20rpx;background: #fff;">

		</view>
		<view
			style="border-radius: 16rpx;margin: 0 20rpx 20rpx 20rpx;width: calc(100% - 40rpx);background: rgb(253, 239, 239);height: 140rpx;display: flex;">
			<image :src="club" style="margin: 20rpx;height: 100rpx;border-radius: 16rpx;" mode="heightFix"></image>
			<view style="display: grid;align-items: center;margin: 0rpx;font-weight: 600;font-size: 30rpx;">
				<view>蚂蚁摄影全国俱乐部</view>
			</view>
		</view>


		<view style="display: flex;align-items: center;">

			<view style="display: flex;align-items: center;margin-left: 30rpx;" @click="changeCity()">
				<view style="min-width: 50px;width: auto;font-size: 26rpx;color: #333333;">{{selectedCityText}}</view>
				<image :src="cityArrow == false ? xiaicon : shangicon " style="width: 40rpx;height: 40rpx;" mode="">
				</image>
			</view>


			<view style="display: flex;align-items: center;margin-left: 60rpx;" @click="showTime()">
				<view style="min-width: 80px;width: auto;font-size: 26rpx;color: #333333;">{{selectedMonth}}</view>
				<image :src="timeArrow == false ? xiaicon : shangicon " style="width: 40rpx;height: 40rpx;" mode="">
				</image>
			</view>


		</view>
		<view class="singleShow" style="margin-top: 20rpx;">
			<view class="imgstyle">
				<uni-row class="demo-uni-row" style="width: 100%;" :gutter="10">
					<uni-col :span="24" v-for="(item, index) in listData" :index="index" :key="index">
						<view @click="toDetail(item)">
							<view>
								<image :src="item.img_url" style="width: 100%;border-radius: 16rpx;margin-top: 10rpx;"
									mode="widthFix">
								</image>
							</view>
						</view>
					</uni-col>
				</uni-row>
			</view>
		</view>
		<cityList ref="city" :cityRange="cityRange" @refreshCity="refreshCity" @changeCityArrow="changeCityArrow">
		</cityList>

		<!-- 		<lingfeng-timepicker ref="timePop" type="year-month" :defaultData="defaultData" :minDate="minDate"
			:maxDate="maxDate" @change="timeChange" @changeTimeArrow="changeTimeArrow"></lingfeng-timepicker> -->


		<u-datetime-picker :show="pickerShow" v-model="selectedMonth" mode="year-month" @confirm="selectDate"
			@cancel="cancelPicker" @close="closePicker"></u-datetime-picker>
		<view class="des_detail" v-if="isBlackApp()">
			<open-app :shareUrl="shareUrl"></open-app>
		</view>
	</view>
</template>
<script>
	const app = getApp();
	import cityList from './components/cityList.vue';
	import openApp from './components/openApp.vue';
	import {
		getClubCity,
		getClubData
	} from '@/api/case.js';
	import {
		loginMobile,
	} from "@/api/user";
	import {
		mapGetters
	} from "vuex";
	import animationType from '@/utils/animationType.js'
	import {
		ref
	} from 'process';

	export default {
		components: {
			cityList,
			openApp
		},
		data() {
			return {
				shareUrl: 'https://www.mayimae.com/qz/pages/usercase/club',
				pickerShow: false,
				cityArrow: false,
				timeArrow: false,
				xiaicon: '../../static/images/usercase/xia.png',
				shangicon: '../../static/images/usercase/shang.png',
				//selectedMonth: Number(new Date()),
				selectedMonth: this.getCurrentYYYYMM(),
				value: '',
				club: '../../static/images/usercase/julebu.png',
				userId: '-1',
				token: '-1',
				phone: '13012562102',
				platform: uni.getSystemInfoSync().platform, //手机类型
				allVideoId: [],
				page: 1,
				limit: 10,
				listData: [],
				hasMore: true,
				studentid: '',
				allInfo: {},
				otherProduct: [],
				cityRange: [],
				showCity: false,
				selectedCityText: '',
				selectedCityValue: '',
			}
		},
		created() {
			let that = this;
		},
		mounted: function() {
			let that = this;
		},
		onPageScroll(res) { //、、、、、
			let that = this;
		},
		onReachBottom() {
			let that = this;
		},
		onLoad(options) {
			let that = this;
			that.token = options.token;
			that.userId = options.userId;
			that.studentid = options.studentid;
			that.getCitys();
			that.loginH5();

			// 通过检查window.android和window.webkit属性来判断是否是移动端
			if (window.webkit) {
				if (that.platform == 'ios') {
					window.webkit.messageHandlers.goShare.postMessage({
						'page': '35',
						'shareurl': that.shareUrl
					});
				}
			}
			if (that.platform == 'android') {
				if (!that.isBlackApp()) {
					window.location.href = 'goShare&page=' + '35' + '&shareurl=' + that.shareUrl;
				}
			}
			if (window.webkit) {
				if (that.platform == 'ios') {
					window.webkit.messageHandlers.navTitle.postMessage({
						'name': '俱乐部'
					});
				}
			}
			if (that.platform == 'android') {
				window.location.href = 'navTitle&name=' + '俱乐部';
			}
		},
		onShow() {
			let that = this;
			// 通过检查window.android和window.webkit属性来判断是否是移动端
			if (window.webkit) {
				if (that.platform == 'ios') {
					window.webkit.messageHandlers.goShare.postMessage({
						'page': '35',
						'shareurl': that.shareUrl
					});
				}
			}
			if (that.platform == 'android') {
				if (!that.isBlackApp()) {
					window.location.href = 'goShare&page=' + '35' + '&shareurl=' + that.shareUrl;
				}
			}
		},
		beforeDestroy() {
			uni.$off('pageScroll'); // 避免内存泄漏
		},
		methods: {
			loginH5() {
				let that = this;
				loginMobile({
						phone: that.phone,
						captcha: '000000',
						spread_spid: 10001
					})
					.then(res => {
						let data = res.data;
						let newTime = Math.round(new Date() / 1000);
						that.$store.commit("LOGIN", {
							'token': res.data.token
						});
						that.$store.commit("SETUID", res.data.uid);

					})
					.catch(res => {
						that.$util.Tips({
							title: res
						});
					});
			},
			isBlackApp() {
				var u = navigator.userAgent.toLowerCase();
				return /micromessenger/i.test(u) || u.indexOf("weibo") > -1 || u.indexOf("qq") > -1 || u.indexOf(
					'mqqbrowser') > -1;
			},
			formatToMonth(timestamp) {
				if (!timestamp) return '-'
				const date = new Date(timestamp * 1) // 秒级时间戳需要乘以1000
				const year = date.getFullYear()
				const month = String(date.getMonth() + 1).padStart(2, '0')
				return `${year}-${month}`
			},
			selectDate(e) {
				this.$nextTick(() => {
					this.selectedMonth = this.formatToMonth(e.value);
					this.pickerShow = false;
					this.getClubs();
				})
			},
			cancelPicker() {
				console.log("cancelPicker")
				this.pickerShow = false;
			},
			closePicker() {
				console.log("closePicker")
				this.pickerShow = false;
			},
			changeCityArrow(e) {
				this.cityArrow = e;
			},
			refreshCity(e) {
				this.selectedCityValue = e.value;
				this.selectedCityText = e.text;
				this.getClubs();
			},
			toDetail(p) {
				window.location.href = decodeURIComponent(p.jump_url)
			},
			getCurrentYYYYMM() {
				const now = new Date();
				const year = now.getFullYear(); // 如 2024
				const month = now.getMonth() + 1; // 1~12
				const yyyy = year.toString();
				const mm = String(month).padStart(2, '0'); // 如 '03'
				return `${yyyy}-${mm}`; // 如 '2024-03'
			},
			changeCity() {
				this.$refs.city.showPop('city');
			},
			showTime() {
				// this.$refs.timePop.show();
				// this.timeArrow = true;
				this.$refs.city.showPop('time');
				this.pickerShow = true;
			},
			timeChange(val) {
				this.selectedMonth = val;
				this.timeArrow = false;
				this.getClubs();
			},
			changeTimeArrow(e) {
				this.timeArrow = e;
			},
			returns() {
				uni.navigateBack();
			},
			getClubs() {
				let that = this;
				let p = {};
				p.userId = that.userId;
				p.token = that.token;
				p.cityId = that.selectedCityValue.toString();
				p.month = that.selectedMonth;
				p.page = that.page;
				p.limit = that.limit;
				getClubData(p).then(res => {
					if (res.code == 0) {
						let arr = res.data;
						if (arr.length < that.limit) {
							that.hasMore = false;
						}
						that.$nextTick(() => {
							if (that.page == 1) {
								that.listData = [];
							}
							arr.forEach((item, index) => {
								that.listData.push(item)
							});
						})
					}
				})
			},
			getCitys() {
				let that = this;
				let p = {};
				p.userId = that.userId;
				p.token = that.token;
				getClubCity(p).then(res => {
					if (res.code == 0) {
						let arr = res.data;
						arr.forEach((item, index) => {
							let obj = {
								"value": item.id,
								"text": item.name
							};
							that.cityRange.push(obj);
						});
						let obj1 = {
							"value": 0,
							"text": '全国'
						};
						that.cityRange.unshift(obj1);

						that.selectedCityValue = that.cityRange[0].value;
						that.selectedCityText = that.cityRange[0].text;

						that.getClubs();

					}
				})
			},
			jqueryUrl(url) {
				let arr = url.split('?');
				let params = arr[1].split('&');
				let obj = {};
				for (let i = 0; i < params.length; i++) {
					let param = params[i].split('=');
					obj[param[0]] = param[1];
				}
				return obj;
			},
		}
	}
</script>

<style lang="scss" scoped>
	page,
	body {
		height: 100%;
		width: 100%;
		background: white !important;
	}

	.des_detail {
		/* 必须设置position: relative;不然会位置飘出父层 */
		position: fixed;
		left: 0;
		top: 0;
		z-index: 1001;
		//margin-top: -1500px;
		width: 100%;
		height: 100vh;
		//background: rgba(95, 157, 228, 0.5);
		background: transparent;
	}

	.show-time {
		color: rgb(106, 106, 106);
		margin-left: 20rpx;
		border-radius: 6rpx;
		border: 1rpx solid rgb(229, 229, 229);
		height: 35px;
		line-height: 35px;
		font-size: 12px;
		padding: 0px 16rpx;
		border-radius: 4px;
	}

	.mores-txt {
		display: flex;
		width: 100%;
		align-items: center;
		justify-content: center;
		height: 70rpx;
		color: #999;
		font-size: 24rpx;

		.iconfont {
			margin-top: 2rpx;
			font-size: 24rpx;
		}
	}

	.userview {
		height: 130rpx;
		width: 100%;
		background: #fff;
		border-bottom-left-radius: 16rpx;
		border-bottom-right-radius: 16rpx;
		margin-top: -10rpx;
		display: grid;

		.username {
			display: flex;
			align-items: center;
			align-items: center;
			justify-content: space-between;
			margin: 20rpx;
			width: calc(100% - 40rpx);
			color: #333333;
		}

		image {
			width: 20rpx;
			height: 20rpx;
		}

		.location {
			font-size: 20rpx;
			display: flex;
			align-items: center;
			color: #666666;
		}

		.banji {
			padding-left: 20rpx;
		}
	}

	.videostyle {
		width: 100%;
		border-radius: 16rpx;
		height: 200rpx;
		margin: 20rpx;
		width: calc(100% - 40rpx);
	}

	.singleShow {
		margin: 10rpx;
		width: calc(100% - 20rpx);
		background: rgb(255, 255, 255);
		border-radius: 10rpx;
		height: auto;
		padding-bottom: 20rpx;

		.titleView {
			display: flex;
			align-items: center;
			align-items: center;
			justify-content: space-between;
			margin: 20rpx;
			width: calc(100% - 40rpx);
			padding-top: 20rpx;
		}

		.subtitle {
			font-size: 30rpx;
			font-weight: 600;
		}

		.lookall {
			font-size: 24rpx;
			line-height: 24rpx;
			display: flex;
			align-items: center;
			color: #ea5550;
		}

		image {
			width: 30rpx;
			height: 30rpx;
		}

		.imgstyle {
			width: calc(100% - 20rpx);
			margin: 0rpx 10rpx;
		}
	}



	.image {
		width: 25px;
		height: 25px;
	}

	.text {
		font-size: 14px;
		margin-top: 5px;
	}


	.grid-dynamic-box {
		margin-bottom: 15px;
	}

	.grid-item-box {
		flex: 1;
		// position: relative;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 15px 0;
	}

	.grid-item-box-row {
		flex: 1;
		// position: relative;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		align-items: center;
		justify-content: center;
		padding: 15px 0;
	}

	.bottom {
		height: 100%;
		height: 100rpx;
		background: #f5f5f5;
		display: flex;
		justify-content: center;

		button {
			background: #fff;
			width: 200rpx;
			height: 60rpx;
			border-radius: 30rpx;
			font-size: 24rpx;
			line-height: 60rpx;
			margin-top: 20rpx;
		}
	}
</style>